<template>
  <div id="app">
    <div class="header">
      <div class="hd">
        <div class="logo">
          <span class="comName"></span>
        </div>
        <div class="userInfo"></div>
      </div>
      <div class="nav">
        <ul>
          <li :class="{ active: item.isActive }" v-for="item in nav" :key="item.name" @click="menuClick(item)">
            <svg class="icon" aria-hidden="true">
                <use :xlink:href="'#icon-'+item.icon"></use>
            </svg>
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="main">
       <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: [
        { name: "统计", icon: "tongji", routerName: "tj", isActive:true },
        { name: "应用", icon: "yingyong", routerName: "yy", isActive:false },
        { name: "人群", icon: "duixiangdongtaiguankong", routerName: "rq", isActive:false },
        { name: "云盘", icon: "jintian", routerName: "yp", isActive:false }
      ]
    };
  },
  methods: {
    menuClick(item) {
      this.nav.forEach(item => {
        item.isActive = false;
      });
      item.isActive = true;
      
      this.$router.push("/" + item.routerName);
    }
  }
};
</script>

<style scoped>
.icon {
  width: 14px;
  height: 14px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.header .hd {
  background-color: #3c7ce6;
  height: 40px;
  padding: 0px 20px;
}
.header .nav {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  padding: 0px 20px;
  background-color: #fff;
}
.header .nav ul {
  list-style: none;
}
.header .nav ul li {
  padding: 0px 10px;
  float: left;
  font-size: 14px;
  margin-right: 20px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
}
.header .nav ul li:hover,
.header .nav ul li:hover .icon {
  color: #3c7ce6;
}
.header .nav ul li.active,
.header .nav ul li:hover {
    color: #3c7ce6;
  border-bottom: 1px solid #3c7ce6;
}
</style>
